<!--
Copyright 2012 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html><meta charset="UTF-8">

<style>
.anim {
  display: inline-block;
}
#allToInitial, #border, #borderSpacing, #padding, #table, td {
  border-style: solid;
}
#outline {
  outline-style: solid;
  left: 20px;
  width: 100px;
}
</style>

<table id="allToInitial" class="anim"><tr><td>All initial.</td><td>All initial.</td></tr></table>
<pre id="background" class="anim">background-color</pre>
<pre id="border" class="anim">border-width
border-radius
border-color</pre>
<table id="table" class="anim">
  <tr>
    <td>border-spacing<br>vertical-align</td>
    <td>border-spacing<br>vertical-align</td>
  </tr>
</table>
<pre id="opacity" class="anim">opacity</pre>
<br>
<pre id="outline" class="anim">outline</pre>
<pre id="padding" class="anim">padding</pre>
<pre id="transform" class="anim">transform</pre>
<br>
<pre id="text" class="anim">color
font-size
font-weight
letter-spacing
line-height
text-indent
text-shadow
word-spacing
word word word word</pre>

<script>
var expected_failures = [
  {
    browser_configurations: [{ firefox: true }],
    tests: ['#background at t=0ms'],
    message: 'rgb(0, 0, 0) gets converted to transparent in Firefox.',
  }, {
    browser_configurations: [{ firefox: true }],
    tests: ['#background at t=1000ms'],
    message: 'FIXME: Transparency is wrong.',
  }, {
    browser_configurations: [{ firefox: true }],
    tests: ['#border at t=2000ms'],
    message: 'FIXME: Border is wrong.',
  }, {
    browser_configurations: [{ msie: true }],
    tests: ['#transform at t=0ms'],
    message: 'none in IE.',
  }, {
    browser_configurations: [{ msie: true }],
    tests: ['#transform at t=1000ms'],
    message: 'Very small value floating point issue.',
  }, {
    browser_configurations: [{ msie: true }],
    tests: [
      '#(background|border) at t=(1|2)000ms',
      '#text at t=0000ms',
      '#(text|outline) at t=(1|2)000ms',
    ],
    message: 'IE returns rbga values.',
  }, {
    browser_configurations: [
      { chrome: true, version: '30|31' },
      { firefox: true },
    ],
    tests: ['#text at t=(0|1000)ms'],
    message: 'Different initial font-size.',
  }
];
</script>
<script src="../bootstrap.js"></script>
<script>
"use strict";

var timing = {duration: 2 * 1000, fill: 'forwards'};

document.timeline.play(new Animation(document.querySelector('#allToInitial'), [{
  backgroundColor: 'initial',
  backgroundPosition: 'initial',
  borderBottomColor: 'initial',
  borderBottomLeftRadius: 'initial',
  borderBottomRightRadius: 'initial',
  borderBottomWidth: 'initial',
  borderLeftColor: 'initial',
  borderLeftWidth: 'initial',
  borderRightColor: 'initial',
  borderRightWidth: 'initial',
  borderSpacing: 'initial',
  borderTopColor: 'initial',
  borderTopLeftRadius: 'initial',
  borderTopRightRadius: 'initial',
  borderTopWidth: 'initial',
  bottom: 'initial',
  color: 'initial',
  fontSize: 'initial',
  fontWeight: 'initial',
  height: 'initial',
  left: 'initial',
  letterSpacing: 'initial',
  lineHeight: 'initial',
  marginBottom: 'initial',
  marginLeft: 'initial',
  marginRight: 'initial',
  marginTop: 'initial',
  maxHeight: 'initial',
  maxWidth: 'initial',
  minHeight: 'initial',
  minWidth: 'initial',
  opacity: 'initial',
  outlineColor: 'initial',
  outlineOffset: 'initial',
  outlineWidth: 'initial',
  paddingBottom: 'initial',
  paddingLeft: 'initial',
  paddingRight: 'initial',
  paddingTop: 'initial',
  right: 'initial',
  textIndent: 'initial',
  textShadow: 'initial',
  top: 'initial',
  transform: 'initial',
  verticalAlign: 'initial',
  visibility: 'initial',
  width: 'initial',
  wordSpacing: 'initial',
  zIndex: 'initial',
}], timing));

document.timeline.play(new Animation(document.querySelector('#background'), [{ backgroundColor: 'initial' }, { backgroundColor: 'green' }], timing));

document.timeline.play(new Animation(document.querySelector('#border'), [{
  borderBottomColor: 'initial',
  borderBottomLeftRadius: 'initial',
  borderBottomRightRadius: 'initial',
  borderBottomWidth: 'initial',
  borderLeftColor: 'initial',
  borderLeftWidth: 'initial',
  borderRightColor: 'initial',
  borderRightWidth: 'initial',
  borderTopColor: 'initial',
  borderTopLeftRadius: 'initial',
  borderTopRightRadius: 'initial',
  borderTopWidth: 'initial',
}, {
  borderBottomColor: 'lime',
  borderBottomLeftRadius: '50px',
  borderBottomRightRadius: '50px',
  borderBottomWidth: '10px',
  borderLeftColor: 'lime',
  borderLeftWidth: '10px',
  borderRightColor: 'lime',
  borderRightWidth: '10px',
  borderTopColor: 'lime',
  borderTopLeftRadius: '50px',
  borderTopRightRadius: '50px',
  borderTopWidth: '10px',
}], timing));

document.timeline.play(new Animation(document.querySelector('#table'), [{
  borderSpacing: 'initial',
  verticalAlign: 'initial',
}, {
  borderSpacing: '10px',
  verticalAlign: '10px',
}], timing));

document.timeline.play(new Animation(document.querySelector('#opacity'), [{ opacity: 'initial' }, { opacity: '0.25' }], timing));

document.timeline.play(new Animation(document.querySelector('#outline'), [{
  outlineColor: 'initial',
  outlineWidth: 'initial',
  outlineOffset: 'initial',
}, {
  outlineColor: 'green',
  outlineWidth: '10px',
  outlineOffset: '10px',
}], timing));

document.timeline.play(new Animation(document.querySelector('#padding'), [{
  paddingBottom: 'initial',
  paddingLeft: 'initial',
  paddingRight: 'initial',
  paddingTop: 'initial',
}, {
paddingBottom: '50px',
  paddingLeft: '50px',
  paddingRight: '50px',
  paddingTop: '50px',
}], timing));

document.timeline.play(new Animation(document.querySelector('#transform'), [{ transform: 'initial' }, { transform: 'rotate(360deg)' }], timing));

document.timeline.play(new Animation(document.querySelector('#text'), [{
  color: 'initial',
  fontSize: 'initial',
  fontWeight: 'initial',
  letterSpacing: 'initial',
  lineHeight: 'initial',
  textIndent: 'initial',
  textShadow: 'initial',
  wordSpacing: 'initial',
}, {
  color: 'green',
  fontSize: '30px',
  fontWeight: '900',
  letterSpacing: '5px',
  lineHeight: '200%',
  textIndent: '50px',
  textShadow: '10px 10px 50px lime',
  wordSpacing: '100px',
}], timing));

</script>
